<template>
  <div style="width: 900px;margin: 25px">
<!--    购物车上面部分的结算栏-->
    <div style="display: flex;margin: 20px 10px">
      <h3>购物车（全部：{{this.totalNumber}}）</h3>
      <h4 style="margin-top: 3px;margin-left: 350px;margin-right: 25px">已选商品</h4>
      <h3 style="color: #d71d3f;font-size:25px">¥:{{totalPrice}}</h3>
      <el-button type="danger" icon="el-icon-shopping-cart-full" @click="checkout"
                 style="margin-left: 50px;font-size: 15px;width: 100px"> 结  算 </el-button>
    </div>

    <!--    表格区域-->
    <el-table
        v-loading="loading"
        :data="tableData"
        stripe border
        @selection-change="selectChange">
      <el-table-column
          type="selection" align="center"
          width="55">
      </el-table-column>

      <!--      商品预览图-->
      <el-table-column
          label="商品预览">
        <template #default="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.item.image"
              :preview-src-list="[scope.row.item.image]">
          </el-image>
        </template>
      </el-table-column>

      <el-table-column
          prop="item.title"
          label="商品名称">
      </el-table-column>

      <el-table-column label="价格">
        <template #default="scope">
          <h4 style="color: #d71d3f;font-size: 20px;">¥:{{scope.row.item.price}}</h4>
        </template>
      </el-table-column>

      <el-table-column
          prop="quantity"
          label="数量" sortable width="140px">
      </el-table-column>

      <el-table-column label="价格">
        <template #default="scope">
          <el-button @click="deleteCart(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--    页码区域,在Vue2里面是不支持v-model:prop="data"的，所以我们要用v-bind:prop.sync="data"实现双向绑定-->
    <div style="margin: 20px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="[5,10,20]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalNumber">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import {currentUser} from "@/utils/login-user";

export default {
  name: "ShoppingCart",
  created() {
    document.title = "我的购物车";

    // 赋值
    this.user = currentUser();
    // 加载数据
    if(this.user){
      this.loadData();
    }else{
      this.$router.push("/login")
    }
  },
  data() {
    return {
      // 用户选中的商品添加到购物车,是一个数组
      cart: [],
      // 表示表格正在加载
      loading: true,
      // 商品总价格
      totalPrice: 0,
      // 取出的用户信息
      user: {},
      // 总数据数
      totalNumber: 400,
      // 当前页码
      currentPage: 1,
      // 一页多少个
      pageSize: 10,
      // 输入框的数据
      search: '',
      // 表格的数据
      tableData: []
    }
  },
  methods: {
    // 加载表格数据,Get请求，Get请求不能直接传对象，只有Post可以直接传对象进去
    loadData() {
      this.loading = true;
      request.get("/cart", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search,
        }
      }).then(res => {
        this.tableData = res.data.records;
        this.totalNumber = res.data.total;
        this.loading = false;
      })
    },
    // 表单每页大小的改变，因为有了双向绑定，直接更新一下数据就好了
    handleSizeChange() {
      this.loadData();
    },
    // 改变当前页码
    handleCurrentChange: function () {
      this.loadData();
    },
    // 选择商品，计算价格
    selectChange(val){
      this.cart = val;
      console.log("现在的购物车: ");
      console.log(this.cart);
      //每次选择商品之后重新计算价格
      if (this.cart){
        this.totalPrice = 0;
        this.cart.forEach(item => {
          this.totalPrice += item.item.price;
        })
        this.totalPrice = this.totalPrice.toFixed(2);
      }
    },
    deleteCart(id){
      request.delete("/cart/" + id).then(res => {
        this.loadData();
      })
    
    },
    // 结账
    checkout(){
      let params = [];
      this.cart.forEach(item => {
        params.push({itemId: item.item.id, quantity : item.quantity})
        })
      // 直接将前端购物车里面的每个商品订单回传回去
      if (this.cart){
        request.post("/order", params).then(res => {
          this.$router.push("/myOrder")
        })
      }else {
        this.$message.error("您没有添加任何商品~");
      }
    }
  },
}
</script>

<style scoped>

</style>@/utils/login-user